<template>
	<!-- <Teleport to="body"> -->
	<van-popup
	  teleport="body"
	  :show="show"
	  closeable
	  :close-icon="guanbi"
	  close-on-popstate
	  position="bottom"
	  :style="{ height: '100%' }"
	  @click-close-icon="show = false"
	>
	<div class="back-view">
		<div class="login-view">
			<p>登陆后更精彩</p>
			<p>全世界的旅行故事都在期待与你的相遇</p>
		</div>
		<div class="input-div global-display global-f-direction global-a-items">
			<van-field v-model="mobile" label-width="70px" type="tel" label="手机号" placeholder="请输入手机号" />
			<van-field v-if="!codeShow" v-model="password" label-width="70px" type="password" label="密码" placeholder="请输入密码" />
			<van-field
				v-if="codeShow"
				v-model="code"
				label-width="70px"
				type="number"
				center
				clearable
				label="验证码"
				placeholder="请输入验证码"
			>
			<template #button>
			<van-button size="mini" type="success" block :disabled="codeDisabled" @click="sendCode">{{codeName}}</van-button>
			</template>
			</van-field>
			<van-button type="success" block @click="goLogin">登陆</van-button>
			<div class="handoff global-display global-a-items">
				<p @click="codeShow = !codeShow">{{codeShow ? '账号登陆' : '验证码登陆'}}</p>
				<p v-if="!codeShow" @click="uploadPassword">忘记密码</p>
			</div>
		</div>
	</div>
	</van-popup>
	<!-- </Teleport> -->
</template>

<script setup>
	import {ref} from 'vue'
	import guanbi from '@/icon/login-pop-up/guanbi.png'
	import emitter from '@/api/event.js'
	import request from '@/api/request.js'
	import { useRouter } from 'vue-router'
	const $router = useRouter()  // 这是路由跳转的
	// 手机号。密码，验证码
	const mobile = ref('')
	const password = ref('')
	const code = ref('')
	// 验证码登陆和密码登录切换
	const codeShow = ref(false)
	// 401状态登录弹窗被触发显示
	const show = ref(false)
	emitter.on('login-pop-up', () => {
	     show.value = true
	});
	/* ----------------登录逻辑----------------- */
	const codeDisabled = ref(false);
	const countdownTime = ref(60);//倒计时时间
	const codeName = ref('发送验证码')
	const bizId = ref('')//验证码id
	// 发送验证码
	async function sendCode(){
		// 调用发送验证码接口
		const res = await request.get('/vercode',{phoneNumbers:mobile.value})
		bizId.value = res.data.bizId
		// 倒计时开始
		codeDisabled.value = true
		var timer = setInterval(()=>{
			if(countdownTime.value > 1){
				countdownTime.value--
				codeName.value = `${countdownTime.value}秒后重新获取`
			}else{
				clearInterval(timer);
				codeDisabled.value = false
				countdownTime.value = 60
				codeName.value = '发送验证码'
			}
		},1000)
	}
	// 验证码和密码登录
	async function goLogin(){
		if(codeShow.value){//验证码登录
			const res = await request.post('/mobile_registration',{mobile:mobile.value,code:code.value,bizId:bizId.value})
			localStorage.setItem('userInfor', JSON.stringify(res.data))
			emitter.emit('login-success');// 登录成功触发
			show.value = false
		}else{//密码登录
			const res = await request.post('/login',{mobile:mobile.value,password:password.value})
			localStorage.setItem('userInfor', JSON.stringify(res.data))
			emitter.emit('login-success');// 登录成功触发
			show.value = false
		}
	}
	// 忘记密码
	function uploadPassword(){
		show.value = false
		$router.push('/password')
	}
</script>

<style>
.back-view{
	background-image: url('@/icon/login-pop-up/login-beijing.jpg');
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
	min-height: 100vh;
}
.login-view{
	padding-top: 80px;
	padding-bottom: 100px;
}
.login-view p{
	padding-left: 20px;
}
.login-view p:nth-child(1){
	font-size: 25px;
	font-weight: bold;
	padding-bottom: 20px;
}
.input-div{
	padding: 0 20px;
}
.input-div{
	--van-button-mini-padding: 14px 8px;
	--van-button-mini-font-size: 14px;
	--van-button-normal-padding: 10px 120px;
	--van-button-normal-font-size: 15px;
}
.van-cell{
	font-size: 16px;
}
.van-button--normal{
	margin-top: 30px !important;
}
.handoff{
	align-self: flex-end;
	padding: 20px 0;
	color: #ffffff;
}
.handoff p{
	padding-left: 10px;
}
</style>